<template>
	<view class="content b-t">
		<view class="list b-b" v-for="(item, index) in address" :key="index" @click="checkAddress(item)">
			<view class="wrapper">
				<view class="address-box">
					<text  v-if="item.default" class="tag">默认</text>
					<text class="address">{{ item.address }} {{ item.area }}</text>
				</view>
				<view class="u-box">
					<text class="name">{{ item.name }}</text>
					<text class="mobile">{{ item.telephone }}</text>
				</view>
			</view>
			<text class="yticon icon-bianji" @click.stop="addAddress('edit', item)"></text>
			<image src="../../static/icon-delete.png" mode="aspectFit" style="width: 40rpx; height: 40rpx; margin-left: 10rpx;" @tap="deleteAddress(item.address_id)"></image>
		</view>
		<button class="add-btn" @click="addAddress('add',{})">新增地址</button>
	</view>
</template>

<script>
import { isEmptyObj} from '../../utils';	
import { mapState,mapMutations } from 'vuex';
export default {
	data() {
		return {
			source: 0,
			
		};
	},
	computed: {
		...mapState('user',['token']),
		...mapState('address',['address']),
	},
	onLoad(option) {
		this.source = option.source;
		this.loadAddress();
	},
	methods: {
		...mapMutations('address',['setAddress']),
		//获取地址
		loadAddress(){
			if(!this.token) return;
			var param = {
				token:this.token,
			}
			this.$ajax.get('member/myaddress',param).then(data=>{
				if(0==data.error){
					this.setAddress(data.data);
				}
			})
		},
		//选择地址
		checkAddress(item) {
			if (this.source == 1) {
				this.$api.prePage().addressData = item;
				uni.navigateBack();
			}
		},
		addAddress(type, item) {
			uni.navigateTo({
				url: `/pages/address/add?type=${type}&data=${JSON.stringify(item)}`
			});
		},
		deleteAddress(id){
			var param = {
				token:this.token,
				address_id:id
			}
			uni.showModal({
				content: '确定要删除吗',
				success: (e)=>{
					if(e.confirm){
						this.$ajax.get('member/deladdress',param).then(data=>{
							if(0==data.error){
								this.refreshList();
							}
						})
					}
				}
			});	
			
		},
		//添加或修改成功之后回调
		refreshList() {
			this.loadAddress();
		}
	}
};
</script>

<style lang="scss">
page {
  padding-bottom: 120upx;
}
.content {
  position: relative;
}
.list {
  display: flex;
  align-items: center;
  padding: 20upx 30upx;
  background: #fff;
  position: relative;
}
.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.address-box {
  display: flex;
  align-items: center;
  .tag {
    font-size: $font-sm;
    color: $base-color;
    margin-right: 10upx;
    background: #fffafb;
    border: 1px solid #ffb4c7;
    border-radius: 4upx;
    padding: 4upx 10upx;
    line-height: 1;
  }
  .address {
    font-size: $font-base;
    color: $font-color-dark;
  }
}
.u-box {
  font-size: $font-base;
  color: $font-color-light;
  margin-top: 16upx;
  .name {
    margin-right: 30upx;
  }
}
.icon-bianji {
  display: flex;
  align-items: center;
  height: 80upx;
  font-size: $font-lg;
  color: $font-color-light;
  padding-left: 30upx;
}

.add-btn {
  position: fixed;
  left: 30upx;
  right: 30upx;
  bottom: 16upx;
  z-index: 95;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 690upx;
  height: 80upx;
  font-size: $font-base;
  color: #fff;
  background-color: $base-color;
  border-radius: 10upx;
  box-shadow: 1px 2px 5px rgba(219, 63, 96, 0.4);
}
</style>